<template>
  <div>
    <Father></Father>
    <h2>一、组件间通信的概念</h2>
    <br>
    <div>都知道组件是vue最强大的功能之一，vue中每一个.vue我们都可以视之为一个组件</div>
    <br>
    <div>组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的</div>
    <br>
    <h2>二、组件间通信解决了什么</h2>
    <br>
    <div>回到vue中，每个组件之间的都有独自的作用域，组件间的数据是无法共享的，但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的</div>
    <br>
    <h3>三、组件间通信的方案</h3>
    <br>
    <div>整理vue中8种常规的通信方案</div>
    <ul>
      <li>通过 props 传递</li>
      <li>通过 $emit 触发自定义事件</li>
      <li>使用 ref</li>
      <li>EventBus</li>
      <li>parent或或root</li>
      <li>attrs 与 listeners</li>
      <li>Provide 与 Inject</li>
      <li>Vuex</li>
    </ul>
    <h4>props传递数据</h4>
    <div>适用场景：父组件传递数据给子组件</div>
    <br>
    <div>子组件设置props属性，定义接收父组件传递过来的参数</div>
    <br>
    <div>父组件在使用子组件标签中通过字面量来传递值</div>
    <br>
    <h4>$emit 触发自定义事件</h4>
    <br>
    <div>适用场景：子组件传递数据给父组件</div>
    <br>
    <div>子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值</div>
    <br>
    <div>父组件绑定监听器获取到子组件传递过来的参数</div>
    <br>
    <h4>ref</h4>
    <br>
    <div>父组件在使用子组件的时候设置ref</div>
    <br>
    <div>父组件通过设置子组件ref来获取数据</div>
    <br>
    <h4>EventBus</h4>
    <br>
    <div>使用场景：兄弟组件传值</div>
    <br>
    <div>创建一个中央时间总线EventBus</div>
    <br>
    <div>兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值</div>
    <br>
    <div>另一个兄弟组件通过$on监听自定义事件</div>
    <br>
    <h4>parent或root</h4>
    <br>
    <div>通过共同祖辈$parent或者$root搭建通信侨联</div>
    <br>
    <div>两个兄弟想要对方数据，但是没法给于是求助父辈，先把数据给到父辈，再从父辈拿</div>
    <br>
    <h4>$attrs 与$ listeners</h4>
    <br>
    <div>使用场景：祖先传递数据给子孙</div>
    <br>
    <h4>provide 与 inject</h4>
    <div>在祖先组件定义provide属性，返回传递的值,后代组件通过inject接收组件传递过来的值</div>
    <br>
    <h4>vuex</h4>
    <div>适用场景: 复杂关系的组件数据传递</div>
    <br>
    <div>Vuex作用相当于一个用来存储共享变量的容器</div>
    <br>
    <div>state用来存放共享变量的地方</div>
    <br>
    <div>getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值</div>
    <br>
    <div>mutations用来存放修改state的方法。</div>
    <br>
    <div>actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作</div>
    <br>
    <h4>小结</h4>
    <br>
    <div>父子关系的组件数据传递选择 props  与 $emit进行传递，也可选择ref</div>
    <br>
    <div>兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递</div>
    <br>
    <div>祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject</div>
    <br>
    <div>复杂关系的组件数据传递可以通过vuex存放共享的变量</div>
  </div>
</template>
<script>
import Father from './Father/Father.vue'
export default{
  components:{ Father },
  data(){
    return {

    }
  }
}
</script>
<style lang="scss" scoped>

</style>
